<template>
  <h1 class="row-title">基础用法</h1>
  <div class="row">
    <ct-dropdown
      placement="bottom"
      :menu-options="menuLis"
      @visible-change="handlerVisibleChange"
      @select="handleSelect"
    >
      <ct-button type="danger">Hover 下拉菜单 </ct-button>
    </ct-dropdown>
  </div>
  <h1 class="row-title">触发方式</h1>
  <div class="row">
    <ct-dropdown
      trigger="click"
      placement="bottom"
      :menu-options="menuLis"
      @visible-change="handlerVisibleChange"
      @select="handleSelect"
    >
      <ct-button type="danger">Click 下拉菜单 </ct-button>
    </ct-dropdown>
  </div>
  <h1 class="row-title">手动打开和关闭</h1>
  <div class="row">
    <ct-dropdown
      ref="dropdownRef"
      trigger="click"
      placement="top"
      manual
      :menu-options="menuLis"
      @visible-change="handlerVisibleChange"
      @select="handleSelect"
    >
      <ct-button type="danger">手动触发菜单</ct-button>
    </ct-dropdown>
  </div>
  <div class="row">
    <ct-button type="info" @click="handlerSwitchMenu">触发菜单</ct-button>
  </div>

  <h1 class="row-title">支持VNode 节点</h1>
  <div class="row">
    <ct-dropdown
      placement="bottom"
      :menu-options="menuLis2"
      @visible-change="handlerVisibleChange"
      @select="handleSelect"
    >
      <ct-button type="danger">Hover 下拉菜单 </ct-button>
    </ct-dropdown>
  </div>
</template>
<script setup>
import { ref, h } from 'vue'

const menuLis = ref([
  {
    key: '1',
    label: 'Label1',
  },
  {
    key: '2',
    label: 'Label2',
    divided: true,
  },
  {
    key: '3',
    label: 'Label3',
    disabled: true,
  },
  {
    key: '4',
    label: 'Label4',
  },
])

const menuLis2 = ref([
  {
    key: '1',
    label: h('div', { class: 'bar', innerHTML: 'hello' }),
  },
  {
    key: '2',
    label: 'Label2',
    divided: true,
  },
  {
    key: '3',
    label: 'Label3',
    disabled: true,
  },
  {
    key: '4',
    label: 'Label4',
  },
])

const dropdownRef = ref(null)
let switchFlag = ref(false)
const handlerVisibleChange = (visible) => {
  console.log(visible)
}
const handleSelect = (selectValue) => {
  console.log(selectValue)
}

const handlerSwitchMenu = () => {
  switchFlag.value = !switchFlag.value
  switchFlag.value ? dropdownRef.value?.open() : dropdownRef.value?.close()
}
</script>
<style lang="scss" scoped></style>
